/*
 * @Author: zhouc 
 * @Date: 2024-04-19 09:59:12 
 * @Function: 选择行为页面
 * @Last Modified by:   zhouc 
 * @Last Modified time: 2024-04-19 09:59:12 
 */
<template>
  <div class="behavior-select-container">
    <van-tabs v-model:active="rec.tabActive" @change="handleTabChange">
      <div v-for="(value, key) in rec.categoryAllObj" :key="key">
        <van-tab
          :title="key"
          :name="key"
          v-if="rec.hasSecondCategoryObj[key]"
          :key="key"
        >
          <div class="tab-container">
            <van-sidebar
              v-if="rec.hasSecondCategoryObj[key]"
              v-model="rec.active"
              @change="handleChange"
            >
              <div v-for="item in value" :key="item.id">
                <van-sidebar-item
                  :title="item.secondCategory"
                  v-if="item.secondCategory"
                />
              </div>
            </van-sidebar>

            <div class="content">
              <van-empty description="暂无数据" v-if="rec.list.length === 0" />

              <div
                class="content-item"
                v-else
                v-for="item in rec.list"
                :key="item.id"
                @click="() => handleClickResult(item)"
              >
                <div :class="`score ${item.score > 0 ? 'green' : ''}`">
                  {{ item.score > 0 ? "+" + item.score : item.score }}
                </div>
                <div
                  class="result"
                  :style="
                    item.description === route.query.value
                      ? { color: '#3E77FA' }
                      : {}
                  "
                >
                  {{ item.description }}
                </div>
              </div>
            </div>
          </div>
        </van-tab>
      </div>
    </van-tabs>
  </div>
</template>

<script lang="ts" setup>
import router from "@/router";
import { onMounted, reactive } from "vue";
import { queryBehavior, queryCategory } from "@/service/modules/evaluation";
import { useStore } from "@/store";
import { useRoute } from "vue-router";

// const route = useRoute();
document.title = "行为选择";

const store = useStore();
const route = useRoute();

const rec = reactive({
  tabActive: "",
  active: 0,
  list: [],
  categoryAllObj: {},
  currentCategory: {},
  hasSecondCategoryObj: {},
  index: 0,
});

onMounted(() => {
  queryCategory().then((res) => {
    if (res.code === 0) {
      rec.categoryAllObj = res.data;

      let tabNum = 0;
      let num = 0;

      for (let key in res.data) {
        if (tabNum === 0) {
          rec.tabActive = key;
          tabNum++;
        }

        rec.hasSecondCategoryObj[key] = res.data[key].some(
          (item) => item.secondCategory
        );

        res.data[key].forEach((item) => {
          if (item.secondCategory) {
            if (num === 0) {
              getQueryBehavior(item);
              num++;
            }
          }
        });
      }
    }
  });
});

const handleTabChange = (value, title) => {
  rec.active = 0;

  if (rec.index !== 0) {
    const newCategoryAllObj = rec.categoryAllObj[title].filter(
      (item) => item.secondCategory
    );

    getQueryBehavior(newCategoryAllObj[0]);
  }

  rec.index++;
};

const handleChange = (value) => {
  const newCategoryAllObj = rec.categoryAllObj[rec.tabActive].filter(
    (item) => item.secondCategory
  );

  getQueryBehavior(newCategoryAllObj[value]);
};

const handleClickResult = (item) => {
  store.commit("setEvaluate/changeSelectBehavior", item);
  router.back();
};

const getQueryBehavior = (params) => {
  queryBehavior({
    ...params,
    pageNum: 1,
    pageSize: 400,
  }).then((res) => {
    if (res.code === 0) {
      rec.list = res.rows;
    }
  });
};
</script>

<style lang="less" scoped>
.behavior-select-container {
  width: 100%;
  min-height: 100vh;
  background-color: #f7f7f7;
  flex-direction: column;
  display: flex;

  .tab-container {
    display: flex;
  }

  .content {
    flex: 1;
    padding: 10px 16px 0 16px;
    font-size: 14px;
    color: #303233;
    background-color: #fff;

    .content-item {
      display: flex;
      align-items: flex-start;
      margin-bottom: 20px;

      .score {
        display: inline-block;
        padding: 0 3px;
        font-size: 9px;
        font-weight: 600;
        text-align: center;
        line-height: 20px;
        margin-right: 8px;
        color: #fa5646;
        background: rgba(250, 86, 70, 0.1);
        border-radius: 4px;
      }

      .green {
        background: rgba(0, 194, 148, 0.1);
        color: #00c294;
      }

      .result {
        flex: 1;
        line-height: 20px;
      }
    }
  }

  /deep/ .van-sidebar {
    width: 119px;

    .van-sidebar-item {
      padding: 10px 16px;
      text-align: center;

      .van-sidebar-item__text {
        font-size: 14px;
        color: #303233;
        font-weight: 400;
      }
    }

    .van-sidebar-item--select:before {
      width: 3px;
      height: 24px;
      background-color: #3e77fa;
    }

    .van-sidebar-item--select {
      .van-sidebar-item__text {
        color: #3e77fa;
      }
    }
  }

  /deep/ .van-tabs__line {
    background-color: #3e77fa;
  }
}
</style>
